<template>
  <div id="Header">
    <van-nav-bar z-index="999"
      :title="title"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
  </div>
</template>

<script>
  import Vue from "vue";
  import {NavBar} from 'vant';
  Vue.use(NavBar);

  export default {
    name:'Header',
    props:{},
    data () {
      return {
        title:''
      };
    },

    components: {},

    watch: {
      $route(to, from) {
        // console.log('to.meta',from);
        this.title = this.$route.query.title ? this.$route.query.title : to.meta.title;
      }
    },

    computed: {},

    methods: {
      // 跳转页面
      toUrl(path, query = {}) {
        this.$router.push({ path, query });
      },
      onClickLeft() {
        if(this.$parent.pathData.path==='/'){
          this.toUrl('/');
        }else{
          this.$router.back();
        }
        document.body.removeAttribute('style') //移除禁止滚动
      }
    },

    beforeMount() {},

    mounted() {},

    created() {
      if(this.$route.query.title){
        this.title = this.$route.query.title;
      }else if(this.$route.meta){
        this.title = this.$route.meta.title;
      }else{
        this.title="彩圈吧"
      }
    },
    activated(){}
  }

</script>
<style lang='scss'>
#Header{
  position: relative;
  .van-nav-bar__title{
    font-size:4vw !important;
  }
  .van-nav-bar__content{
    box-shadow: 0 0 5px rgb(51 51 51 / 20%);
  }
  .van-icon{
    font-size:6vw !important;
    color:#666 !important;
  }
}
</style>
